import { UploadOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Button, Form, Input, Modal, Upload, UploadProps, message } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};

type Props = {
  handlerEvent: () => void;
};
export default forwardRef((props: Props, ref: any) => {
  const { setJdInputStr, setFile_path } = useModel('Resume.resumeModel');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const uploadProps: UploadProps = {
    name: 'file',
    action: API_REQUEST_URL + '/upload',
    fileList: [],
    maxCount: 1,
    onChange(info: any) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        if (info.file.response.code === 1) {
          setFile_path(info.file.response.message);
        }
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败，请重试`);
        setFile_path('');
      }
    },
    onRemove: () => {
      setFile_path('');
    },
  };

  // 开始分析
  const onStart = async () => {
    console.log('%c' + '开始分析', 'background: green; color: #fff;');
    // setBusiness_diagnosis(testData.business_diagnosis);

    // if (!file_path) {
    //   message.error('请先上传简历');
    //   return;
    // }
    // if (!jdInputStr) {
    //   message.error('请先输入JD');
    //   return;
    // }
    //
    // setSpinning(true);
    // try {
    //   const res: API.Result_Main_ = await ApiMain({
    //     file_path,
    //     jd_input: jdInputStr,
    //   });
    //   console.log('%c' + 'res', 'background: green; color: #fff;');
    //   console.log(res);
    //   if (res.code === 1) {
    //     setBusiness_diagnosis(res.business_diagnosis);
    //   }
    //   setSpinning(false);
    // } catch (error) {
    //   setSpinning(false);
    // }
    props.handlerEvent();
  };

  const onFinish = (values: any) => {
    console.log('%c' + 'values', 'background: green; color: #fff;');
    console.log(values);
    // onStart();
  };

  const onCancel = () => {
    setIsModalOpen(false);
  };

  useImperativeHandle(ref, () => ({
    openModal: () => {
      setIsModalOpen(true);
      setJdInputStr('');
    },
  }));

  type FieldType = {
    username?: string;
    password?: string;
    file?: string;
  };

  return (
    <Modal title="新增" footer={null} open={isModalOpen} onCancel={onCancel}>
      <Form {...layout} onFinish={onFinish} autoComplete="off">
        <Form.Item<FieldType>
          label="岗位"
          name="username"
          rules={[{ required: true, message: '请输入岗位!' }]}
        >
          <Input placeholder="请输入岗位" />
        </Form.Item>

        <Form.Item<FieldType>
          label="JD要求"
          name="password"
          rules={[{ required: true, message: '请上输入JD!' }]}
        >
          <Input.TextArea
            autoSize={{ minRows: 4, maxRows: 10 }}
            placeholder="请上输入JD"
          />
        </Form.Item>

        <Form.Item<FieldType>
          label="简历"
          name="file"
          rules={[{ required: true, message: '请上传简历!' }]}
        >
          <Upload {...uploadProps}>
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: layout.labelCol.span }}>
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
});
